"use client";

import React, { useState } from "react";
import { Slider } from "./ui/slider";
import { Minus, Plus } from "lucide-react";

interface ZoomControlProps {
  onZoomChange: (zoomPercentage: number) => void;
  initialZoom?: number;
}

export function ZoomControl({ onZoomChange, initialZoom = 100 }: ZoomControlProps) {
  const [zoomPercentage, setZoomPercentage] = useState<number>(initialZoom || 100);

  const handleZoomChange = (value: number[]) => {
    const newZoom = value[0];
    if (typeof newZoom === 'number') {
      setZoomPercentage(newZoom);
      onZoomChange(newZoom);
    }
  };

  return (
    <div className="flex items-center gap-3 p-2 bg-white dark:bg-gray-800 rounded-md border-2 border-black dark:border-gray-700 shadow-md">
      <button 
        className="p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"
        onClick={() => {
          const newZoom = Math.max(25, zoomPercentage - 25);
          setZoomPercentage(newZoom);
          onZoomChange(newZoom);
        }}
        aria-label="Zoom out"
        title="Zoom out"
      >
        <Minus className="h-4 w-4 text-gray-700 dark:text-gray-300" />
      </button>
      
      <div className="w-32">
        <Slider 
          value={[zoomPercentage]} 
          onValueChange={handleZoomChange}
          min={25}
          max={200}
          step={25}
          className="w-full"
        />
      </div>
      
      <button 
        className="p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"
        onClick={() => {
          const newZoom = Math.min(200, zoomPercentage + 25);
          setZoomPercentage(newZoom);
          onZoomChange(newZoom);
        }}
        aria-label="Zoom in"
        title="Zoom in"
      >
        <Plus className="h-4 w-4 text-gray-700 dark:text-gray-300" />
      </button>
      
      <span className="text-xs font-medium min-w-[3rem] text-center">
        {zoomPercentage}%
      </span>
    </div>
  );
} 